<template>
	 <page-meta :root-font-size="`${fontSize}px`"></page-meta>
		<view class="detail-container">
			<view class="detail-title">{{noticeDetail['公告标题']}}</view>
			<view class="detail-content">
			{{noticeDetail['公告内容']}}
			</view>
			<file-list :file="noticeFile"></file-list>
			<!-- <view class="detail-img">
				<image src="../../static/icon/4.png"></image>
			</view> -->
			<view class="bottom-box">
				<text>{{noticeDetail['发布时间']}}</text>
				<text>阅读量:{{noticeDetail['阅读量']}}</text>
			</view>
			<!-- <view class="detail-time">{{noticeDetail['创建时间'] | formatTime}}</view> -->
		</view>
</template>

<script>
	import FileList from '../components/fileList.vue' 
	import dayjs from 'dayjs'
	import { mapState } from 'vuex'
	export default {
		computed: {
			...mapState(['fontSize'])
		},
		components: {
			FileList
		},
		data() {
			return {
				noticeFile: {},
				imglength: 0,
				imgItem: [],
				params: {
					proclamationId: null,
					projectId: null
				},
				proclamationId: null,
				noticeDetail: {},
			}
		},
		onLoad(options) {
			this.params.proclamationId = +options.id
			this.getNoticeDetail()
		},
		methods: {
			getNoticeDetail() {
				uni.showLoading()
				this.params.projectId = uni.getStorageSync('projId')
				this.$http.post('vx/proclamation/info', this.params).then(res => {
					// console.log(res)
					if(res.code === 10000) {
						res.data.发布时间 = dayjs(res.data.发布时间).format('YYYY-MM-DD HH:mm:ss')
						this.noticeDetail = res.data
						if(res.data.公告图片.length) {
							res.data.公告图片.forEach((item, index) => {
								this.downloadFile(item, index)
							})
						}
					}
				})
			},
			downloadFile(id, index) {
				this.imgLength++
				this.$http.post('common/file/download', {
					id
				}).then(res => {
					console.log(res)
					if (res.code === 10000) {
						this.imgItem.push(res.data.fileData)
						this.noticeFile[index] = {}
						this.noticeFile[index].fileData = res.data.fileData
					}
				})
			}
		}
	}
</script>

<style lang="scss">
	.detail-container {
		padding: 36rpx 48rpx 48rpx 46rpx;
			.detail-title {
				color: #333;
				font-size: 36rpx;
				margin-bottom: 23rpx;
				text-align: center;
				font-weight: bold;
				// margin-left: 240rpx;
			}
			.detail-content {
				font-size: 32rpx;
				color: #333;
				margin-bottom: 50rpx;
				text-align: justify;
			}
			.bottom-box {
				margin-top: 40rpx;
				color: #333;
				display: flex;
				font-size: 32rpx;
				justify-content: space-between;
			}
		}
</style>
